<!--
-->
<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {FormMixins} from "@/utils/FormMixins.js";
import {useStore} from "vuex"
import * as api from "./api.js"

const {ELForm, visible, title, layout, isLoading, isSubmitting, state, setOptions, submitSuccess, cancelClick} = FormMixins();
const {$message} = window;

const store = useStore()

const userInfo = computed(() => {
    return store.getters.userInfo
})

const Model = () => {
    return {
        newPassword: null,
        rePassword: null,
    }
}

// 校验规则
const rules = computed(() => {
    return {
        newPassword: [{required: true, validator: customRules.newPassword}],
        rePassword: [{required: true, validator: customRules.rePassword}],
    }
})

// 自定义校验规则
const customRules = {
    newPassword: (rule, value, callback) => {
        if (!value) {
            return callback(new Error("请设置新密码"));
        }
        if (value.length < 6) {
            return callback(new Error("登录密码不能少于 6 位"));
        }
        return true;
    },
    rePassword: (rule, value, callback) => {
        if (!value) {
            return callback(new Error("请再次输入密码"));
        }
        if (value != state.model.newPassword) {
            return callback(new Error("请确认密码是否一致"));
        }
        return true;
    },
};

// 表单显示
async function show(config) {
    setOptions(config);
    state.model = Model();
    state.model = {...state.model, ...state.options}
    // 初始化数据

}

// 校验表单
function beforeSubmit() {
    ELForm.value.validate(isOk => {
        isOk && submit()
    })
}

// 提交表单
async function submit() {
    isSubmitting.value = true
    console.log("submit: ", state.model)
    const body = {
        NewPassword: state.model.newPassword,
        Id: userInfo.value.id
    }
    const {success, data} = await api.ResetUserPassword(body);
    isSubmitting.value = false
    if (!success) return 0;
    $message.success("修改成功")
    submitSuccess()
}

onMounted(() => {
})
defineExpose({
    show
})
</script>

<template>
    <vxe-modal v-model="visible" :title="title" show-maximize resize show-footer :position="{top: '60px'}" :height="layout.modalHeight()">
        <template #default>
            <el-form ref="ELForm" v-loading="isLoading" :model="state.model" :rules="rules" :validate-on-rule-change="false" class="ELForm" inline label-width="80px">
                <el-form-item :style="layout.col1" label="用户">
                    <el-input v-model="userInfo.realName" disabled/>
                </el-form-item>
                <el-form-item :style="layout.col1" label="新密码" prop="newPassword">
                    <g-password-input v-model="state.model.newPassword"/>
                </el-form-item>
                <el-form-item :style="layout.col1" label="确认密码" prop="rePassword">
                    <g-password-input v-model="state.model.rePassword"/>
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <el-button @click="cancelClick">取消</el-button>
            <el-button :loading="isSubmitting" type="primary" @click="beforeSubmit">
                确定
            </el-button>
        </template>
    </vxe-modal>
</template>
<style lang="scss" scoped>
.EditForm {

}
</style>
